<template>
    <div class="store-info">
        <van-cell-group title="基本信息">
            <van-cell title="* 企业性质" :clickable="false">
                <template #right-icon>
                    <radio-group v-model="formData.agentProperty" direction="horizontal">
                        <radio name="4" shape="square">个人</radio>
                        <radio name="1" shape="square">企业</radio>
                    </radio-group>
                </template>
            </van-cell>
            <van-field label="* 统一社会信用代码" v-model="formData.agentCredit" placeholder="请输入统一社会信用代码" input-align="right" v-if="formData.agentProperty == '1'" />
            <van-field label="* 服务商名称" v-model="formData.name" placeholder="请输入服务商名称" input-align="right" />
            <van-field label="* 联系人" v-model="formData.contact" placeholder="请输入联系人" input-align="right" />
            <van-field label="* 联系电话" v-model="formData.contactPhone" placeholder="请输入联系电话" input-align="right" />
            <van-cell title="* 所在地区" is-link clickable :value="regionName" @click="$refs.addressPickerRef.showPicker()" />
            <van-field label="* 详细地址" v-model="formData.address" placeholder="请输入详细地址" input-align="right" />

            <van-field label="* 签约主体" v-model="formData.agentSubName" placeholder="请输入签约主体" input-align="right" />
            <van-field label="* 合同编号" v-model="formData.agreementNo" placeholder="请输入合同编号" input-align="right" />
            <van-cell title="* 合同起始日期" is-link clickable :value="formData.agreementStartDate || '点击选择'" @click="$refs.timeStart.show()" />
            <van-cell title="* 合同截止日期" is-link clickable :value="formData.agreementEndDate || '点击选择'" @click="$refs.timeEnd.show()" />
        </van-cell-group>

        <van-cell-group title="营业执照照片">
            <div class="img_con">
                <upload-img desc="营业执照照片" :imgUrl.sync="formData.licensePicture" fileType="005"></upload-img>
            </div>
        </van-cell-group>

        <!-- --------------------------------- -->

        <!-- picker -->
        <common-picker ref="addressPickerRef" title="省市区" :columns="baseData.storeDic.regionList" @commit="addressPicker"></common-picker>
        <!--  -->
        <time-picker ref="timeStart" @commit="timeCommit($event,'agreementStartDate')"></time-picker>
        <time-picker ref="timeEnd" @commit="timeCommit($event,'agreementEndDate')"></time-picker>
    </div>
</template>

<script>
import { mapState } from "vuex";
import CommonPicker from "@/components/picker/common-picker";
import UploadImg from "@/components/form/upload-img";
import TimePicker from "@/components/picker/timePicker";
import { RadioGroup, Radio } from "vant";

export default {
    components: { CommonPicker, UploadImg, TimePicker, RadioGroup, Radio },

    filters: {},

    data() {
        return {
            formData: {
                name: "", // 店铺名称
                agentProperty: "4", // 4：个人，1：企业/个体户
                contact: "",
                contactPhone: "",

                province: "", // 省
                city: "", // 市
                county: "", // 区
                provinceCode: "", // 省
                cityCode: "", // 市
                countyCode: "", // 区

                address: "",
                agentCredit: "",
                agentSubName: "",
                agreementNo: "",
                agreementStartDate: "",
                agreementEndDate: "",
                licensePicture: "",
            },
        };
    },

    mounted() {
        this.prepareData();
    },

    computed: {
        ...mapState({
            baseData: (state) => state.baseData,
            serverInfo: state => state.homeData.serverInfo,
        }),

        regionName() {
            if (!this.formData.province) {
                return "请选择";
            } else {
                return `${this.formData.province}-${this.formData.city}-${this.formData.county}`;
            }
        },
    },

    methods: {

        prepareData() {
            // 进件状态
            if (["01", "02", "03", '04'].indexOf(this.serverInfo.certifyStatus) === -1) {
                return;
            }
            this.$http.serverCollectionBaseQuery().then((result) => {
                if (result === false) {
                    return false;
                }
                this.formData = result;
            });
        },

        // 省市区
        addressPicker(e) {
            const code = e.code;
            this.formData.provinceCode = code[0];
            this.formData.cityCode = code[1];
            this.formData.countyCode = code[2];

            let _array = e.showText.split("-");
            this.formData.province = _array[0]; // 省
            this.formData.city = _array[1]; // 市
            this.formData.county = _array[2]; // 区
        },

        timeCommit(e, key) {
            this.formData[key] = e;
        },

        submitForm() {
            const formData = {
                ...this.formData,
                code: this.serverInfo.code, // 商户号
            };
            return formData;
        },
    },
};
</script>

<style lang="scss" scoped>
.store-info {
    width: 100%;
    .img_con {
        // padding: 10px;
    }
}
</style>
